<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Bootstrap Dashboard by Bootstrapious.com</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="robots" content="all,follow">
  <!-- Google fonts - Roboto -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
  <!-- Choices CSS-->
  <link rel="stylesheet" href="../vendor/choices.js/public/assets/styles/choices.min.css">
  <!-- Custom Scrollbar-->
  <link rel="stylesheet" href="../vendor/overlayscrollbars/css/OverlayScrollbars.min.css">
  <!-- theme stylesheet-->
  <link rel="stylesheet" href="../css/style.default.css" id="theme-stylesheet">
  <!-- Custom stylesheet - for your changes-->
  <link rel="stylesheet" href="../css/custom.css">
  <!-- Favicon-->
  <link rel="shortcut icon" href="../img/favicon.ico">
  <!-- Tweaks for older IEs-->
  <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]-->
</head>

<body>
  <!--    页内导航-->
  <div class="bg-gray-200 text-sm">
    <div class="container-fluid">
      <nav aria-label="breadcrumb">
        <ol class="breadcrumb mb-0 py-3">
          <li class="breadcrumb-item"><a class="fw-light" href="admin/index.html">Home</a></li>
          <li class="breadcrumb-item active fw-light" aria-current="page">最新推荐 </li>
        </ol>
      </nav>
    </div>
  </div>
  <!--页内导航 end-->
  <!-- 页面主要内容 -->
  <div class="container-fluid">
    <div class="row">
      <div class="col">
        <div class="card">
          <div class="card-header">
            <h3 class="h4 mb-0">最新推荐配置</h3>
          </div>
          <div class="card-body">
            <div class="table-responsive">
              <table class="table text-sm mb-0 table-striped table-hover">
                <thead>
                  <tr class="align-middle text-center">
                    <th>#</th>
                    <th>图片</th>
                    <th>图书名称</th>
                    <th>order</th>
                    <th>操作</th>
                  </tr>
                </thead>
                <tbody>
                  <tr class="align-middle text-center">
                    <th>1</th>
                    <td>
                      <img src="../img/book/20004737-1_w.jpg" width="140px" height="160px" alt="">
                    </td>
                    <td>Java核心技术第十版第Ⅰ卷</td>
                    <td>1</td>
                    <td>
                      <button type="button" class="btn btn-outline-danger">删除</button>
                      <button type="button" class="btn btn-outline-success">编辑</button>
                    </td>
                  </tr>
                  <tr class="align-middle text-center">
                    <th scope="row">2</th>
                    <td>
                      <img src="../img/book/20004737-1_w.jpg" width="140px" height="160px" alt="">
                    </td>
                    <td>Java核心技术第十版第Ⅰ卷</td>
                    <td>2</td>
                    <td>
                      <button type="button" class="btn btn-outline-danger">删除</button>
                      <button type="button" class="btn btn-outline-success">编辑</button>
                    </td>
                  </tr>
                  <tr class="align-middle text-center">
                    <th scope="row">3</th>
                    <td>
                      <img src="../img/book/20004737-1_w.jpg" width="140px" height="160px" alt="">
                    </td>
                    <td>Java核心技术第十版第Ⅰ卷</td>
                    <td>3</td>
                    <td>
                      <button type="button" class="btn btn-outline-danger">删除</button>
                      <button type="button" class="btn btn-outline-success">编辑</button>
                    </td>
                  </tr>
                  <tr class="align-middle text-center">
                    <th scope="row">4</th>
                    <td>
                      <img src="../img/book/20004737-1_w.jpg" width="140px" height="160px" alt="">
                    </td>
                    <td>Java核心技术第十版第Ⅰ卷</td>
                    <td>4</td>
                    <td>
                      <button type="button" class="btn btn-outline-danger">删除</button>
                      <button type="button" class="btn btn-outline-success">编辑</button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col  px-5">
        <button type="button" class="btn btn-success" data-bs-toggle="modal"
          data-bs-target="#queryNewBook">新增图书列表</button>
      </div>
    </div>
  </div>

  <!-- 页面主要内容 end -->
  <!--  新增banner模态框-->
  <div class="modal fade" id="queryNewBook" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">图书查询</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <form>
            <div class="mb-3">
              <div class="input-group">
                <select class="form-select" id="inputGroupSelect04">
                  <option selected>一周</option>
                  <option selected>一月</option>
                  <option>图书名称</option>
                  <option value="1">ISBN</option>
                  <option value="2">出版社</option>
                  <option value="3">作者</option>
                </select>
                <input type="text" class="form-control w-50">
                <button class="btn btn-danger " type="button">查询</button>
              </div>
            </div>
            <div class="mb-3" id="book-list">
              <!-- 一条查询消息-->
              <!-- <div class="card mb-3" >
              <div class="row">
                <div class="col-auto text-center">
                  <img src="../img/book/20004737-1_w.jpg" width="100px" height="100px" alt="...">
                </div>
                <div class="col-6 px-0">
                  <div class="card-body p-0">
                    <h5 class="card-title">Java核心技术第十版第Ⅰ卷 <small class="text-muted">9876123412345</small></h5>
                    <span class="card-text">张三</span> <br>
                    <span class="card-text">清华大学出版社</span> <br>
                    <span class="card-text"><small class="text-muted">2021-12-22</small> </span>
                  </div>
                </div>
                <div class="col-2 d-flex align-items-center">
                  <input type="number" class="form-control"  value="1" max="4" min="1">
                </div>
                <div class="col-2 d-flex align-items-center">
                  <button type="button" class="btn btn-outline-success">设置</button>
                </div>
              </div>
            </div> -->
              <!-- 一条查询消息 end-->



            </div>
            <div class="mb-3 d-flex justify-content-center">
              <nav aria-label="Page navigation example">
                <ul class="pagination">
                  <li class="page-item">
                    <a class="page-link" href="#" aria-label="Previous">
                      <span aria-hidden="true">&laquo;</span>
                    </a>
                  </li>
                  <li class="page-item"><a class="page-link" href="#">1</a></li>
                  <li class="page-item"><a class="page-link" href="#">2</a></li>
                  <li class="page-item"><a class="page-link" href="#">3</a></li>
                  <li class="page-item">
                    <a class="page-link" href="#" aria-label="Next">
                      <span aria-hidden="true">&raquo;</span>
                    </a>
                  </li>
                </ul>
              </nav>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
  <!-- 新增banner模态框 end-->



  <!-- JavaScript files-->
  <script src="../vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
  <script src="../vendor/just-validate/js/just-validate.min.js"></script>
  <script src="../vendor/overlayscrollbars/js/OverlayScrollbars.min.js"></script>
  <!-- Main File-->
  <script src="../js/front.js"></script>
  <script src="../../js/ajax.js"></script>
  <!-- <script src="../js/page.js"></script> -->
  <script>
    let bookList;
    function loadData(pageIndex, pageSize) {
      ajax.get(`/bookstore/admin/book/page.do?pageIndex=${pageIndex}&pageSize=${pageSize}`, function (respData) {
        let responseResult = JSON.parse(respData);
        let bookListNode = document.querySelector("#book-list");
        bookList = responseResult.data.data; 
        bookList.forEach((book, index) => {
          let bookNodeInfo = ` <!-- 一条查询消息-->
                                    <div class="card mb-3" >
                                      <div class="row">
                                        <div class="col-auto text-center">
                                          <img src="/img/book/${book.pic}" width="100px" height="100px" alt="...">
                                        </div>
                                        <div class="col-6 px-0">
                                          <div class="card-body p-0">
                                            <h5 class="card-title">${book.title} <small class="text-muted">${book.isbn}</small></h5>
                                            <span class="card-text">${book.author}</span> <br>
                                            <span class="card-text">${book.publisher}</span> <br>
                                            <span class="card-text"><small class="text-muted">${book.pubdate}</small> </span>
                                          </div>
                                        </div>
                                        <div class="col-2 d-flex align-items-center">
                                          <input type="number" id="${'b'+book.id}" class="form-control"  value="1" max="4" min="1">
                                        </div>
                                        <div class="col-2 d-flex align-items-center">
                                          <button type="button" onclick='setNewBook(${JSON.stringify(book)})' class="btn btn-outline-success">设置</button>
                                        </div>
                                      </div>
                                    </div>
                                    <!-- 一条查询消息 end-->`;
          let bookNode = document.createRange().createContextualFragment(bookNodeInfo);
          bookListNode.appendChild(bookNode);
        });
      });

    }

    function setNewBook(book){ 
      console.log(book);
      let indexId='b'+ book.id;
      let order=document.getElementById(indexId).value;
      let {content,cid,format,isonline,packing,paper,...newBook}=book;
      newBook.order=order;
      console.log(newBook);

      ajax.post(`/bookstore/admin/book/newBook.do`,JSON.stringify(newBook),function(data){
        console.log(data);
      });
    }

    document.addEventListener('DOMContentLoaded', (event) => {
        loadData(1,5);
    });
  </script>
</body>

</html>